<template>
  <div class="hello">
    <template v-if="reportData">
      <div class="card">
        <div>
          <p class="title">后厨出菜统计</p>
        </div>
        <div>
          <div class="cook-item" v-for="(chef,index) in reportData.chefCompleteList" :key="'chef_list_'+index">
            <div style="display: flex;box-sizing: border-box;">
              <div style="width: 150px;">
                <div
                  style="display: flex;align-items: center;margin-bottom: 20px;justify-content: flex-start;padding: 10px 0;">
                  <img src="../assets/logo.png" style="width: 35px;height: 35px;margin-right: 10px;border-radius: 6px;">
                  <div style="text-align: left;">
                    <p style="margin: 0;font-size: 1rem;font-weight: bold;margin-bottom: 2px;">{{chef.name}}</p>
                    <span style="font-size: .4rem;font-weight: normal;color: rgb(189, 189, 189);">{{chef.role}}</span>
                  </div>
                </div>
              </div>
              <div style="flex: 1;text-align: right;padding-right: 10px;">
                <div>
                  <p style="font-size: .8rem;line-height: 18px;color: #FE5D4D">实出菜：<span
                      style="color: #333;font-weight: bold;font-size: .8rem;">{{chef.actualNum}}</span></p>
                </div>
                <div>
                  <p style="font-size: .8rem;line-height: 18px;color: #3BA4FF">应出菜：<span
                      style="color: #333;font-weight: bold;font-size: .8rem;">{{chef.planNum}}</span></p>
                </div>
                <div>
                  <p style="font-size: .8rem;line-height: 18px;">平均出菜时间：{{chef.dishCookingTime}}<span>m</span> </p>
                </div>
              </div>
            </div>
            <div style="background-color: #f8f8f8;border-radius: 6px;">
              <!-- <canvas :id="'pie' + (index + 1)" height="200" width="180"></canvas> -->
              <canvas :id="'dv_' + (index + 1)" height="200" width="300"></canvas>
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <div>
          <p class="title">门店出菜统计</p>
        </div>
        <div style="display: flex;width: 100%;">
          <div style="flex: 1;">
            <h2>{{reportData.storeComplete.planNum}}</h2>
            <div>
              <span class="tag" style="background-color: #40A9FF;"></span>
              <span>应出总数</span>
            </div>
          </div>
          <div style="flex: 1;">
            <h2>{{reportData.storeComplete.actualNum}}</h2>
            <div>
              <span class="tag" style="background-color: #FF7875;"></span>
              <span>实出总数</span>
            </div>
          </div>
        </div>
        <div style="width: 100%;">
          <canvas id="stack" height="70"></canvas>
        </div>
      </div>

      <div class="card" style="padding-left: 10px;padding-right: 10px;">
        <div style="text-align: left;">
          <div>
            <p class="title">菜品平均制作时间</p>
          </div>
          <div>
            <h2 style="display: inline-block;margin: 0;">{{ reportData.storeCookingTime }}</h2><span>m</span>
          </div>
        </div>
        <div style="margin-top: 18px;">
          <div class="dish-item" v-for="(dish,index) in reportData.dishCookingList" :key="'dish_list_' + index">
            <div style="display: flex;justify-content: space-between;">
              <div style="display: inline-block;">
                <span style="font-weight: bold;">{{dish.name}}</span>
                <div style="width: 100%;height: 2px;background-color: #f0f1f2;position: relative;">
                  <div style="background-color: #FF7875;position: absolute;left: 0;bottom: 0; height: 2px; width: 20%;"
                    :style="{backgroundColor: dish.doing == 'well' ? '#FF7875' : '#84b6e0', width:  dish.percent+'%'}">
                  </div>
                </div>
              </div>
              <div>
                <span>{{dish.cookingTime}}</span>
                <span>分钟</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card" style="display: flex;justify-content: space-between;padding-right: 10px; padding-left: 10px;">
        <div style="display: flex;">
          <div style="flex: 1;">
            <div>
              <h2 style="display: inline-block;">{{ reportData.avgCookingTime }}</h2>
              <span>m</span>
            </div>
            <div>
              <span style="color:#0062b2;font-weight: bold;">后厨出菜平均时间</span>
            </div>
          </div>
        </div>
        <div style="display: flex;">
          <div style="flex: 1;">
            <div>
              <h2 style="display: inline-block;">{{ reportData.avgServiceTime }}</h2>
              <span>m</span>
            </div>
            <div>
              <span style="color:#0062b2;font-weight: bold;">平均上菜时间</span>
            </div>
          </div>
        </div>
        <div style="display: flex;">
          <div style="flex: 1;">
            <div>
              <h2 style="display: inline-block;">{{ reportData.avgOrderTime }}</h2>
              <span>m</span>
            </div>
            <div>
              <span style="color:#0062b2;font-weight: bold;">订单平均完成时间</span>
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <div>
          <p class="title">15分钟订单完成率</p>
        </div>
        <div>
          <canvas id="area"></canvas>
        </div>
      </div>
    </template>
    <template v-else>
      <p class="tip-text">暂无数据</p>
    </template>



  </div>
</template>

<script>
  import F2 from '@antv/f2';
  // import '@antv/data-set';
  const axios = require('axios').default;

  // 动态构造饼图
  // function makePieChart(list, containerId) {

  //   const map = {};
  //   list.forEach(function (obj) {
  //     map[obj.name] = obj.percent + '%';
  //   });

  //   const pieChart = new F2.Chart({
  //     id: containerId,
  //     pixelRatio: window.devicePixelRatio,
  //     padding: [20, 'auto']
  //   });
  //   pieChart.source(list, {
  //     percent: {
  //       formatter: function formatter(val) {
  //         return val + '%';
  //       }
  //     }
  //   });
  //   pieChart.coord('polar', {
  //     transposed: true,
  //     innerRadius: 0.7,
  //     radius: 0.85
  //   });
  //   pieChart.tooltip(false);
  //   pieChart.legend({
  //     // position: 'top',
  //     itemFormatter: (item) => {
  //       return item + ' ' + map[item]
  //     }
  //   });
  //   pieChart.axis(false);
  //   pieChart.interval()
  //     .position('a*percent')
  //     .color('name', ['#FE5D4D', '#3BA4FF'])
  //     .adjust('stack');
  //   pieChart.render();
  // }

  // 构建条形图
  function makeStackChart(data) {
    const chart = new F2.Chart({
      id: 'stack',
      pixelRatio: window.devicePixelRatio
    });
    chart.source(data, {
      count: {
        tickCount: 5
      }
    });
    chart.coord({
      transposed: true
    });

    chart.legend(false).axis(false)

    chart.interval()
      .position('store*count')
      .color('name', ['#40A9FF', '#FF7875', '#FFC069'])
      .adjust('stack');
    chart.render();
  }

  // 构建面积图
  function makeAreaChart(areaData) {
    const areaChart = new F2.Chart({
      id: 'area',
      pixelRatio: window.devicePixelRatio
    });

    areaChart.source(areaData, {
      time: {
        type: 'cat',
        tickCount: 6,
        range: [0, 1]
      },
      tem: {
        tickCount: 6,
        min: 0
      }
    });

    areaChart.tooltip({
      showCrosshairs: true,
      onShow: function onShow(ev) {
        var items = ev.items;
        items[0].name = '订单数';
      }
    });

    areaChart.axis('time', {
      label: function label(text, index, total) {
        const textCfg = {};
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index === total - 1) {
          textCfg.textAlign = 'right';
        }
        textCfg.text = text + 'm';
        return textCfg;
      }
    });

    areaChart.area()
      .position('time*tem')
      .color('l(90) 0:#1890FF 1:#f7f7f7')
      .shape('smooth');
    areaChart.line()
      .position('time*tem')
      .color('l(90) 0:#1890FF 1:#f7f7f7')
      .shape('smooth');
    areaChart.render();

    // 默认展示 tooltip
    var item = {
      time: '15',
      tem: 45
    };
    // 要展示 tooltip 的数据
    var point = areaChart.getPosition(item); // 获取该数据的画布坐标
    areaChart.showTooltip(point); // 展示该点的 tooltip
  }

  function makeDataViewChart(list, containerId) {
    const DataSet = window.DataSet;
    const {
      Shape,
      Util
    } = F2;

    Shape.registerShape('polygon', 'labeledPolygon', {
      draw: function draw(cfg, container) {
        const points = this.parsePoints(cfg.points);
        const style = Util.mix({
          fill: cfg.color,
          points
        }, cfg.style);
        const polygon = container.addShape('Polygon', {
          className: 'polygon',
          attrs: style
        });
        // 在 polygon 的中心添加文本
        const text = container.addShape('Text', {
          // className: 'polygon',
          attrs: {
            x: (points[0].x + points[2].x) / 2,
            y: (points[0].y + points[2].y) / 2,
            text: cfg.origin._origin.name,
            fill: '#fff',
            textAlign: 'center',
            textBaseline: 'middle',
            fontSize: 12
          }
        });

        const polygonBBox = polygon.getBBox();
        const textBBox = text.getBBox();

        // 这里为了让文本显示全，根据文本和矩形框的宽度比来设置文本大小
        const ratio = polygonBBox.width / textBBox.width;
        text.attr('fontSize', ratio * 12 * 0.6);

        return [polygon, text];
      }
    });

    const data = {
      name: 'root',
      children: list
    };
    const dv = new DataSet.DataView();
    dv.source(data, {
      type: 'hierarchy'
    }).transform({
      field: 'value',
      type: 'hierarchy.treemap',
      tile: 'treemapResquarify',
      as: ['x', 'y']
    });
    const nodes = dv.getAllNodes();
    nodes.map(function (node) {
      node.name = node.data.name;
      node.value = node.data.value;
      return node;
    });

    const chart = new F2.Chart({
      id: containerId,
      padding: 2,
      width: 300,
      height: 200,
      pixelRatio: window.devicePixelRatio
    });
    chart.source(nodes);
    chart.scale({
      value: {
        nice: false
      }
    });
    chart.axis(false);
    chart.legend(false);
    chart.tooltip(false);
    chart.polygon()
      .position('x*y')
      .color('name')
      .shape('labeledPolygon')
      .style({
        lineWidth: 1,
        stroke: '#fff'
      });
    chart.render();
  }

  export default {
    name: 'HelloWorld',
    props: {
      storeCode: String,
      fromDate: String,
      toDate: String,
      brandCode: String,
    },
    data() {
      return {
        reportData: null
      }
    },
    mounted() {
      // console.log('single', this.storeCode, this.date)
      axios.get(
        `${process.env.VUE_APP_BASE_URL}${process.env.VUE_APP_REPORT_URL}?fromDate=${this.fromDate}&toDate=${this.toDate}&storeCode=${this.storeCode}&brandCode=${this.brandCode}`
        ).then(res => {
        // 赋值给数据后
        this.reportData = res.data

        // DOM完成渲染的回调
        this.$nextTick(() => {

          this.reportData.chefCompleteList.forEach((chef, index) => {
            makeDataViewChart(chef.pieDataList, 'dv_' + (index + 1))
          })

          makeStackChart(this.reportData.storeComplete.stackData)

          makeAreaChart(this.reportData.fifteenComplete.dataList)
        })
      })

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .tip-text {
    color: #999;
    line-height: 20rem;
  }

  h2 {
    margin: 0.8rem 0;
    margin-right: 2px;
  }

  h3 {
    margin: 40px 0 0;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  .tag {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin-right: 4px;
  }

  .card {
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px #ccc;
  }

  span {
    font-size: .8rem;
  }

  .title {
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #0062b2;
  }

  .dish-item {
    line-height: 40px;
  }

  .cook-item {
    border-top: 1px dashed #ccc;
    margin-bottom: 20px;
  }

  .cook-item:first-child{
    border-top: none;
  }

  .hello {
    padding-bottom: 50px;
  }
</style>